<template>
  <view class="my">
    <view class="userTop text-center">
      <view class="avatar">
        <!-- {{userInfo}} -->
        <AtAvatar class="m-auto" circle :image="userInfo.avatarUrl"></AtAvatar>
        <view class="pt20">
          <text class="loginBtn" v-if="userInfo.token">
            {{userInfo.nickName}}
          </text>
          <AtButton v-else @click="onGetUserInfo" :full="false" type='secondary' size='small'>一键登陆</AtButton>
        </view>
      </view>
      <view class="bgfff radius15 myInfo mt20 ml30 mr30">
        <AtGrid :columnNum="3" :data="state.myInfo" :onClick="handlerClick" />
      </view>
    </view>
    
    <view class="myList">
      <AtList :hasBorder="true">
        <!-- <AtListItem
          :hasBorder="true"
          title='领取收益'
          note='描述信息'
          arrow='right'
          :iconInfo="{ size: 25, color: '#78A4FA', value: 'calendar', }"
        /> -->
        <AtListItem
          :hasBorder="true"
          title='骑手加入'
          note='注册为一名回收员，挣取佣金'
          extraText='现在加入'
          arrow='right'
          :iconInfo="{ size: 22, color: '#78A4FA', value: 'user', }"
          :onClick="()=>{redirect('/pages/register-recycler/register-recycler')}"
        />
        <button class="wxopenbtn" @click="share" :full="true" openType='share' size='small'>
          <view class="flex-between">
            <AtIcon class="icon" value='share' size='22' color='#78A4FA'></AtIcon>
            <view>
              <view class="tit">分享挣钱</view>
              <view class="desc c999">邀请好友下单、商家入驻可获得额外奖励</view>
            </view>
          </view>
          
        </button>
        <button class="wxopenbtn" :full="true" openType='contact' size='small'>
          <view class="flex-between">
            <AtIcon class="icon" value='message' size='22' color='#78A4FA'></AtIcon>
            <view>
              <view class="tit">联系客服</view>
              <view class="desc c999">客服24小时在线，随时为您服务</view>
            </view>
          </view>
          
        </button>
        <AtListItem
          :hasBorder="true"
          title='意见反馈'
          note='我们重视每一个宝贵的建议或需求'
          arrow='right'
          :iconInfo="{ size: 22, color: '#78A4FA', value: 'mail', }"
        />
      </AtList>
    </view>
    <myFooter />
  </view>
</template>

<script setup>
import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref } from 'vue'
import myFooter from "../tabBar/index.vue"

import Taro from "@tarojs/taro"
import './my.scss'

const {ctx} = getCurrentInstance()

const state = reactive({
  myInfo:[
    {
      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
      value: '我的收入'
    },
    {
      image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
      value: '我的积分'
    },
    {
      image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
      value: '我的订单'
    }
  ],
  userInfo:{
    avatarUrl: "",
    city: "",
    country: "",
    gender: 1,
    language: "",
    nickName: "",
    province:'',
  }
});

// onCompute


const redirect = (url)=>{
  Taro.navigateTo({
    url
  })
}

const handlerClick = (item,index)=>{
  if (index == 0) {
    redirect('/pages/balance/balance')
  } else if (index == 1) {
    redirect('/pages/integral/integral')
  } else if(index == 2){
    redirect('/pages/order/order')

  }
}

// const onContact = (e)=>{
//   console.log(e);
// }

const share = async ()=>{
  try {
   let res = await Taro.showShareMenu({
     activityId:'12312',
    withShareTicket: false,
    showShareItems:['qq', 'qzone', 'wechatFriends', 'wechatMoment']
  })
  console.log(res);
  } catch (error) {
    console.log(error);
  }
  // Taro.showShareMenu({
  //   withShareTicket: false,
  //   showShareItems:['qq', 'qzone', 'wechatFriends', 'wechatMoment'],
  //   success (val) {
  //     console.log(val);
  //   }
  // })
}

const onGetUserInfo = ()=>{
  Taro.getUserProfile({
    desc: '用于完善注册资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: function (res) {
        state.userInfo = res.userInfo
        handlerLogin()
    }
  })
}
const userTemp = reactive({
    avatarUrl: "",
    token: "",
    nickName: "",
})

let userInfo = computed(()=>{
  let res = Taro.getStorageSync("userInfo");
  if (!res) {
    return userTemp
  }
  return res
})

const handlerLogin = ()=>{
  Taro.login({
    success: async (res)=> {
      if (res.code) {
        try {
          let loginData = await Taro.request({
            url: `${BASEAPI}/wxlogin`,
            method:"post",
            dataType:'json',
            data:{
              jsCode: res.code,
              ...state.userInfo
            }
          })
          Taro.setStorage({
            key:"userInfo",
            data:loginData.data
          })
          userTemp.avatarUrl = loginData.data.avatarUrl
          userTemp.token = loginData.data.token
          userTemp.nickName = loginData.data.nickName

          ctx.$toast.success("登录成功")
          console.log(userInfo);
        } catch (error) {
          console.log(JSON.stringify(error));
        }
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    }
  })
}



onBeforeMount(()=>{
})


</script>
